page{
    background: #F5F5F5;
}
.flex {
    display: flex;
    align-items: center;
}
.card-layout{
    @include wh(100%);
    background: #FFFFFF;
    border-radius: 8rpx;
    padding: 24rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;
    .address-layout{
        @include flex(flex-start,space-between);

        .left{
            @include wh(50rpx,50rpx);
            @include flex(center,center);
            margin-right: 28rpx;
            border-radius: 50%;
            background: #F5F5F5;
            margin-top: 3rpx;
            image{
                @include wh(40rpx,40rpx);
            }
        }
        .right{
            @include wh(calc(100% - 78rpx));
            .top{
                @include flex(center,space-between);
    
                .top-left{
                    @include flex(center,flex-start);
                    @include fonts(28rpx,#939395);
                    .nikeName{
                        @include fonts(32rpx,#222222,bold);
                        @extend %text-overflow;
                        max-width: 180rpx;
                        margin-right: 12rpx;
                    }
                }
    
                .but{
                    @include fonts(28rpx,#222222);
                    padding: 5rpx 28rpx;
                    box-sizing: border-box;
                    border-radius: 42rpx; 
                    border: 1rpx solid #BFBFBF;
                }
            }
    
            .text{
                @include fonts(28rpx,#636569);
                margin-top: 20rpx;
            }
        }
        
    }

    .address-not{
        @include flex(center,space-between);
        @include fonts(32rpx,#222222,bold);
        image{
            @include wh(48rpx,48rpx);
        }
    }

    .card-shop-title {
        justify-content: space-between;
        padding-bottom: 24rpx;
        > text {
            font-size: 28rpx;
            font-family: PingFang SC-Semibold, PingFang SC;
            font-weight: 600;
            color: #222222;
            line-height: 40rpx;
        }
        view {
            image {
                width: 40rpx;
                height: 40rpx;
            }
            text {
                margin-left: 4rpx;
                line-height: 40rpx;
                font-size: 28rpx;
                font-family: PingFang SC-Semibold, PingFang SC;
                font-weight: 600;
                color: #967e4f;
            }
        }
    }
    .card-shop-content {
        align-items: flex-start;
        padding-top: 24rpx;
        margin-bottom: 50rpx;
        > image {
            width: 112rpx;
            height: 112rpx;
            border-radius: 4rpx;
            margin-right: 24rpx;
        }
        .card-content-right {
            flex: 1;
            > .flex {
                justify-content: space-between;
                .flex {
                    text {
                        font-size: 32rpx;
                        font-family: PingFang SC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #222222;
                        line-height: 40rpx;
                        margin-right: 12rpx;
                    }
                    view {
                        background: #f4f2ed;
                        height: 30rpx;
                        line-height: 30rpx;
                        padding: 0 8rpx;
                        font-size: 22rpx;
                        font-family: PingFang SC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #967e4f;
                    }
                }
                > view:last-child {
                    font-size: 32rpx;
                    font-family: PingFang SC-Semibold, PingFang SC;
                    font-weight: 600;
                    color: #222222;
                    line-height: 40rpx;
                }
            }
            .card-content-right-text {
                font-size: 24rpx;
                font-family: PingFang SC-Regular, PingFang SC;
                font-weight: 400;
                color: #636569;
                line-height: 36rpx;
                margin-top: 4rpx;
            }
        }
    }

    .item-layout{
        @include flex(flex-start,space-between);
        margin-bottom: 54rpx;
        .left{
            @include flex(center,flex-start);
            @include fonts(28rpx,#222222,bold);

            .label{
                @include fonts(22rpx,#FE4500);
                padding: 4rpx;
                box-sizing: border-box;
                border-radius: 8rpx;
                border: 1rpx solid #FE4500;
                margin-left: 24rpx;
            }
        }

        .right-text{
            @include flex(center,flex-end);
            @include fonts(28rpx,#222222,bold);
            image{
                @include wh(32rpx,32rpx);
                margin-left: 12rpx;
            }
        }
        .money{
            @include fonts(28rpx,#FF2D52,bold);
        }
        .text{
            @include fonts(24rpx,#636569);
            margin-top: 12rpx;
            margin-right: 44rpx;
        }
        .vip_money{
            @include fonts(28rpx,#967E4F,bold);
        }
        .vip_text{
            @include fonts(24rpx,#967E4F);
            margin-top: 12rpx;
            margin-right: 44rpx;
        }
    }
}

.bottom-layout{
    @include wh(100%);
    @include flex(center,space-between);
    @include fonts(24rpx,#636569);
    padding: 12rpx 24rpx;
    padding-bottom: 12rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 12rpx);
    box-sizing: border-box;
    background: #FFFFFF;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    text{
        @include fonts(28rpx,#FF2D52,bold);
        margin-left: 16rpx;
    }
    .left-bottom{
        @include flex(center,flex-start);

        .detail{
            @include flex(center,flex-start);
            @include fonts(24rpx,#222222);
            margin-left: 40rpx;
            image{
                @include wh(32rpx,32rpx);
                margin-left: 8rpx;
            }
        }
    }

    .confirm-but{
        @include wh(200rpx,76rpx);
        @include flex(center,center);
        @include fonts(30rpx,#FFFFFF,bold);
        background: #FF2D52;
        border-radius: 8rpx;
    }
}

.dialog-content{
    max-height: 60vh;
    padding: 24rpx;
    box-sizing: border-box;
    overflow-y: scroll;
    .coupon-card-layout:last-child{
        margin-bottom: 0rpx;
    }
    .coupon-card-layout{
        padding: 24rpx;
        box-sizing: border-box;
        background: #FDF0F3;
        border-radius: 20rpx;
        margin-bottom: 48rpx;
        .coupon-top{
            @include flex(center,space-between);
            .left{
                @include flex(center,flex-start);
                .money{
                    @include fonts(48rpx,#FF2D52,bold);
                    margin-right: 12rpx;
                }
                .coupon-name{
                    @include wh(350rpx);
                    @include fonts(32rpx,#FF2D52,bold);
                    @extend %text-overflow;
                }
            }

            .check{
                @include wh(48rpx,48rpx);
            }

            .but{
                @include wh(136rpx,64rpx);
                @include flex(center,center);
                @include fonts(28rpx,#FFFFFF);
                background: #FF2D52;
                border-radius: 46rpx;
            }

            .disable{
                background: #BFBFBF;
            }
        }

        .label{
            @include fonts(22rpx,#FF2D52,bold);
            display:inline;
            padding: 10rpx 20rpx;
            box-sizing: border-box;
            background: #FFFFFF;
            border-radius: 36rpx;
            margin-top: 12rpx;
        }
        .text{
            @include fonts(24rpx,#222222);
            margin-top: 12rpx;
        }
        .time{
            @include fonts(24rpx,#939395);
            margin-top: 20rpx;
        }
    }


    .detail-layout{
        padding-bottom: 100rpx;
        box-sizing: border-box;

        .tips{
            @include wh(100%);
            @include flex(center,center);
            @include fonts(28rpx,#C9C9C9);
        }
        .detail-item{
            @include flex(center,space-between);
            @include fonts(28rpx,#222222,bold);
            padding: 20rpx 0;
            box-sizing: border-box;
            .title{
                @include fonts(28rpx,#636569);
            }
            .text-red{
                @include fonts(28rpx,#FF2D52,bold);
            }
            .total{
                @include fonts(32rpx,#222222,bold);
            }
        }
    }
}

.detail-layout{
    margin: -24rpx 0;
}